<template>
  <!-- 话术库消息列表项 -->
  <div class="list-item" @click="handleClickItem">
    <!-- 文字 -->
    <div class="text text-two-ellipsis" v-if="info.type == 1">{{ info.content }}</div>
    <!-- <div class="text text-two-ellipsis" v-if="info.type == 1">{{ info.content[0].content.contentText }}</div> -->
    <div class="other" v-else>
      <!-- 图片 -->
      <div class="content" v-if="info.type == 2">
        <img :src="info.content[0].content.url" alt="" srcset="" />
        <div class="info">
          <div class="title text-one-ellipsis">{{ info.content[0].content.title }}</div>
          <div class="desc text-one-ellipsis">{{ info.content[0].content.size }}</div>
        </div>
      </div>
      <!-- 图文 -->
      <div class="content" v-if="info.type == 3">
        <img :src="info.content[0].content.imgUrl" alt="" srcset="" />
        <div class="info">
          <div class="title">{{ info.content[0].content.title }}</div>
          <div class="desc">{{ info.content[0].content.link }}</div>
        </div>
      </div>
      <!-- PDF -->
      <div class="content" v-if="info.type == 4">
        <img src="@/assets/pdf.png" alt="" srcset="" />
        <div class="info">
          <div class="title text-one-ellipsis">{{ info.content[0].content.name }}</div>
          <div class="desc text-one-ellipsis">{{ info.content[0].content.size }}</div>
        </div>
      </div>
      <!-- 视频 -->
      <div class="content" v-if="info.type == 5">
        <video :src="info.content[0].content.url" controls="controls" class="madp-picture madp-picture-video" />
        <div class="info">
          <div class="title text-one-ellipsis">{{ info.content[0].content.name }}</div>
          <div class="desc text-one-ellipsis">{{ info.content[0].content.size }}</div>
        </div>
      </div>
      <!-- 小程序 -->
      <div class="content" v-if="info.type == 6">
        <img :src="info.content[0].content.imgUrl" alt="" srcset="" />
        <div class="info">
          <div class="title text-one-ellipsis">{{ info.typeDesc }}</div>
          <div class="desc text-one-ellipsis">{{ info.content[0].content.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入mescroll的vue组件
export default {
  name: '',
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {},
  data() {
    return {}
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    handleClickItem() {
      this.$emit('handleClickItem', this.info)
    }
  }
}
</script>
<style lang="less" scoped>
.list-item {
  width: 100%;
  padding: 16px;
  background: #fafafa;
  border-radius: 6px;
  margin-bottom: 10px;
  cursor: pointer;
  .text {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2c2c2c;
  }
  .other {
    .content {
      display: flex;
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 6px;
    }
    video {
      width: 40px;
      height: 40px;
      border-radius: 6px;
    }
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 8px;
      width: 175px;
      .title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2c2c2c;
      }
      .desc {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(44, 44, 44, 0.5);
      }
    }
  }
}
</style>